<template>
  <v-touch class="produceImagery" @press="isPress?null:press()" @panstart="isPress?panstart($event):null"
    @panmove="isPress?panmove($event):null" @panend="isPress?panend($event):null"
    @pinchend="isPress?pinchend($event):null" @pinchmove="isPress?pinchmove($event):null" :style="imageryStyle">
  </v-touch>
</template>

<script>
import { mapActions, mapGetters } from "vuex"
export default {
  props: ["indexImagery"],
  data() {
    return {
      x: 0,
      y: 0,
      moveX: 0,
      moveY: 0,
      scale: 1
    }
  },
  computed: {
    imageryStyle() {
      const indexImagery = this.indexImagery,
        dropShadow = indexImagery.produceEryId === this.actionElement.produceEryId ? "0px 0px 0.2rem orange" : "0px 0px 0rem"
      return {
        background: "url(" + indexImagery.eryImgInWorld + ")0 0/100% 100%",
        width: indexImagery.widthInWorld,
        height: indexImagery.heightInWorld,
        top: parseFloat(indexImagery.topInWorld) + this.moveY + "%",
        left: parseFloat(indexImagery.leftInWorld) + this.moveX + "%",
        transform: "scale(" + this.scale + ")",
        filter: "drop-shadow(" + dropShadow + ")"
      }
    },
    isPress() {
      return JSON.stringify(this.actionElement) !== "{}"
    },
    ...mapGetters("produceStatus", {
      actionElement: "getActionElement"
    })
  },
  methods: {
    //长按激活工具栏 保存当前对象
    press: function () {
      this.clickMusic()
      this.setActionElement(this.indexImagery)
    },
    panstart: function (event) {
      this.y = event.center.y
      this.x = event.center.x
    },
    panmove: function (event) {
      this.moveX = (event.center.x - this.x) / this.mainWidth * 100
      this.moveY = (event.center.y - this.y) / this.mainHeight * 100
    },
    panend: function () {
      //保存状态 更新意象位置
      this.indexImagery.topInWorld = this.imageryStyle.top
      this.indexImagery.leftInWorld = this.imageryStyle.left
      this.x = 0
      this.y = 0
      this.moveX = 0
      this.moveY = 0
    },
    //双指放大缩小 改变意象scale
    pinchmove: function (event) {
      if (event.additionalEvent === "pinchout" && this.scale < 2.5) {
        this.scale = this.scale + 0.01
      }
      else {
        if (this.scale > 0.4) this.scale = this.scale - 0.01
      }
    },
    //松手后将scale转化为基本属性
    pinchend: function () {
      const indexImagery = this.indexImagery
      indexImagery.topInWorld = parseFloat(indexImagery.topInWorld) +
        parseFloat(indexImagery.heightInWorld) * (1 - this.scale) / 2 + "%"
      indexImagery.leftInWorld = parseFloat(indexImagery.leftInWorld) +
        parseFloat(indexImagery.widthInWorld) * (1 - this.scale) / 2 + "%"
      indexImagery.widthInWorld = parseFloat(indexImagery.widthInWorld) * this.scale + "%"
      indexImagery.heightInWorld = parseFloat(indexImagery.heightInWorld) * this.scale + "%"
      this.scale = 1
    },
    ...mapActions("produceStatus", ["setActionElement"])
  }
};
</script>

<style lang="stylus" scoped>
.produceImagery
  position absolute
</style>
